<template>

  <el-dialog v-model="dialogTableVisible"
             title="详情"
             :width="isMobile?'90%':'70%'"
             :before-close="handleClose"
             :show-close="false"
             draggable>
    <el-row>
      <el-col :span="16">
        <el-image :src="imgUrl" lazy style="width: 80%">
          <template #placeholder>
            <div v-loading="true" element-loading-text="Loading..." style="height: 100%" class="image-slot"></div>
          </template>
        </el-image>
      </el-col>
      <el-col :span="8">
        <el-form
            label-position="top"
            label-width="100px"
            style="max-width: 460px"
        >
          <el-form-item label="这是谁的衣服">
            <el-input v-model="clothInfo.user" disabled/>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item label="品牌">
                  <el-input v-model="clothInfo.cloth_brand" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="价格">
                  <el-input v-model="clothInfo.cloth_price" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item label="衣服类型">
                  <el-input v-model="clothInfo.cloth_type" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="颜色">
                  <el-input v-model="clothInfo.cloth_color" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item label="季节">
                  <el-input v-model="clothInfo.cloth_season" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="尺码">
                  <el-input v-model="clothInfo.cloth_size" disabled/>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form-item>
          <el-form-item label="购买时间">
            <el-date-picker v-model="clothInfo.buy_time" disabled/>
          </el-form-item>
          <el-form-item label="存放位置">
            <el-input v-model="clothInfo.cloth_place" disabled/>
          </el-form-item>
          <el-form-item label="对这件衣服进行描述">
            <el-input v-model="clothInfo.describe" disabled/>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloseWindow" style="background-color: #F2F1EF">关闭</el-button>
        <el-button @click="handleUpdate" disabled style="background-color: #F2F1EF">更新</el-button>
        <el-button style="background-color: #413F3D;color: #F2F1EF">
                <el-popconfirm
                    width="120"
                    :hide-after="100"
                    confirm-button-text="OK"
                    cancel-button-text="算了"
                    :icon="InfoFilled"
                    icon-color="#626AEF"
                    title="确认删除？"
                    @confirm="deleteConfirm"
                >
        <template #reference>
          删除
        </template>
      </el-popconfirm>
        </el-button>
      </span>

    </template>
  </el-dialog>
  <InsertWindow :isMobile="isMobile" :is_open_insert_window="is_open_insert_window"></InsertWindow>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {InfoFilled} from '@element-plus/icons-vue'
import axios from "axios";
import InsertWindow from "./InsertWindow.vue"

const prop = defineProps({clothInfo: Object, imgUrl: String, isMobile: Boolean})
const emit = defineEmits(["closeWindow"])
const dialogTableVisible = ref(true)
const is_open_insert_window = ref(0)


const handleUpdate = () => {
  is_open_insert_window.value = 1
}
const handleClose = () => {
}

const handleCloseWindow = () => {
  emit("closeWindow", false)
}
const deleteConfirm = () => {
  axios.post("/api/wardrobePlus/delete/", prop.clothInfo).then((resp) => {
    if (resp.data.code !== 0) {
      ElMessage.error(resp.data.message)
    } else {
      ElMessage.success(resp.data.message)
      window.location.reload()
    }
  })

}


</script>

